<template>
  <div class='container'>
    <div class='sidebar' :style='{flexBasis: flexBasis}'>
      <div class="pure-menu">
        <router-link class="pure-menu-link" to="/">回到首頁</router-link>
        <span class="pure-menu-heading">古文</span>
        <ul class="pure-menu-list">
          <li class="pure-menu-itm" v-for='itm, index in words'>
            <router-link class="pure-menu-link" :to="itm.path">{{ itm.name }}</router-link>
          </li>
        </ul>

        <span class="pure-menu-heading">古詩詞</span>
        <ul class="pure-menu-list">
          <li class="pure-menu-itm" v-for='itm, index in poems' :key='index'>
            <router-link class="pure-menu-link" :to="itm.path">{{ itm.name }}</router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class='content'>
      <button class='pure-button btn-toggle' @click.prevent='toggle'>Toggle</button>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import words from './words'
import poems from './poems'

export default {
  data () {
    return {
      flexBasis: '200px',
      words: words,
      poems: poems
    }
  },
  methods: {
    toggle () {
      if (this.flexBasis === 0) {
        this.flexBasis = '200px'
      } else {
        this.flexBasis = 0
      }
    }
  }
}
</script>

<style src='./article.css'></style>

<style lang='scss' scoped>
.pure-menu {
  text-align: start;
  a {
    color: white;
  }
  a:hover {
    background: none;
    color: orange;
  }
  a:focus {
    background: none;
    color: orange;
  }
}
.pure-menu-list {
  padding-left: 1em;
}
.pure-menu-heading {
  color: #cacaca;
}
.btn-toggle {
  position: fixed;
  font-size: 70%;
}
.container {
  display: flex;
}
.sidebar {
  flex-basis: 200px;
  overflow: hidden;
  background: #3f505d;
  color: white;
  transition: all 0.2s;
}
.content {
  box-sizing: border-box;
  text-align: start;
  border: 1px solid #888;
  flex: 1;
}
</style>
